<template>
    <v-dialog v-model="editdialog" scrollable persistent max-width="85%" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-card-title>
          <span class="headline">{{ name }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="valid"  ref="editipsform">
            <v-layout wrap>
              <v-flex xs12 sm6 md3>
                <v-text-field label="IP地址" v-model="fields.ipAddress" :rules="ipRules" :error-messages="msg.ipAddress"  required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="子网掩码" v-model="fields.subnet" :error-messages="msg.subnet"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="网关" v-model="fields.gateway" :error-messages="msg.gateway"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="所属" v-model="fields.belong"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="用途" v-model="fields.fuction"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="ISP" v-model="fields.isp"></v-text-field>
              </v-flex>
            </v-layout>
            </v-form>
          </v-container>
          <small>*必填</small>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click.native="closeEditIps()" small><h4>关闭</h4></v-btn>
          <v-btn color="warning" @click.native="editIps($refs.editipsform)" small><h4>保存</h4></v-btn>
          <v-btn color="error" @click.native="deleteIps()" small><h4>删除</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('editips')

export default {
  name: 'editips',
  data: function () {
    return this.$store.state.editips
  },
  methods: {
    ...mapActions({
      editIps: 'editIps',
      deleteIps: 'deleteIps',
      closeEditIps: 'closeEditIps',
      loadEditIps: 'loadEditIps'
    })
  },
  props: {
    editdialog: {
      type: Boolean,
      default: null
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    editdialog () {
      this.$refs.editipsform.reset()
      let msg = this.msg
      for (var i in msg) {
        msg[i] = ''
      }
      if (this.editdialog) {
        this.loadEditIps(this.id)
      } else {
        this.$store.dispatch('listips/handlerIps')
      }
    }
  }
}
</script>
